<template>
  <view class="viewport">
    <!-- 封面 -->
    <view class="cover">
      <image
        class="image"
        :src="hotInfo?.bannerPicture"
        mode="widthFix"
      />
    </view>

    <!-- 推荐选项 -->
    <view class="tabs">
      <text
        class="tab-item"
        :class="{
          active: currentTabIndex == index,
        }"
        @tap="changeTab(index)"
        v-for="(item, index) in hotInfo?.subTypes"
        :key="item.id"
        >{{ item.title }}</text
      >
      <!-- <text class="tab-item text">新品预告</text> -->
    </view>

    <!-- 推荐列表表 -->
    <scroll-view scroll-y v-show="currentTabIndex == index" class="scroll-view" v-for="(item,index) in hotInfo?.subTypes" :key="item.id"
    @scrolltolower="getMore(index)">
      <view class="goods">
        <view
          class="navigator"
          v-for="subItem in item.goodsItems.items"
          :key="subItem.id"
        >
          <image
            class="thumb"
            :src="subItem.picture"
            mode="scaleToFill"
          />
          <view class="name ellipsis-2"
            >{{subItem.name}}</view
          >
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{subItem.price}}</text>
          </view>
        </view>
      </view>

      <view class="loading-text">
        {{ item.goodsItems.page<item.goodsItems.pages?'正在加载...':'没有跟多数据了...' }}
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import {
  hotListHttp,
  type HotParamsType,
} from '@/services/hotService'
import type { HotItem } from '@/types/home'
import type { HotResType } from '@/types/hot'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 路由参数
const props = defineProps<{
  type: string
}>()
console.log('路由参数：', props)
const urlMap = [
  {
    type: '1',
    title: '特惠推荐',
    url: '/hot/preference',
  },
  {
    type: '2',
    title: '爆款推荐',
    url: '/hot/inVogue',
  },
  {
    type: '3',
    title: '一站买全',
    url: '/hot/oneStop',
  },
  {
    type: '4',
    title: '领券中心',
    url: '/hot/new',
  },
]

// 当前热门推荐的选中类别
const currentPage = urlMap.find(
  (v) => v.type == props.type
)

uni.setNavigationBarTitle({
  title: currentPage!.title,
})

const hotInfo = ref<HotResType>()
const env = import.meta.env
console.log('环境变量：',env);
const pageInit = env.DEV?30:1;

const pageParams: HotParamsType = {
  page: pageInit, // 1 30 TODO-test，测试分页的。
  pageSize: 10,
  // subType: currentPage?.type, // 这个参数并不是路由参数！如果传路由参数，接口返回就有问题了。
}
const currentTabIndex = ref(0)
const getHotList = async () => {
  let res = await hotListHttp(
    currentPage?.url,
    pageParams
  )
  console.log('热门推荐页面res：', res)

  hotInfo.value = res.result
}

// 切换tab
const changeTab = (index: number) => {
  currentTabIndex.value = index
}

/**
 * 触底加载更多。
 */ 
const  getMore = async (index:number)=>{
  let currentTabInfo = hotInfo.value?.subTypes[index]
  console.log('触底了index:',index);
  // let newIndex = currentTabInfo!.goodsItems.page++ // 先用，后++
  if(currentTabInfo!.goodsItems.page < currentTabInfo!.goodsItems.pages){
    currentTabInfo!.goodsItems.page++
  }else {
    uni.showToast({
      title:'已经没有更多数据了~'
    })
    return false
  }
 
  let res = await hotListHttp(
    currentPage?.url,
    {
      page:currentTabInfo!.goodsItems.page, 
      pageSize:currentTabInfo?.goodsItems.pageSize,
      subType:currentTabInfo?.id,
    }
  )
  console.log('getMore的res：',res);
  hotInfo.value?.subTypes[index].goodsItems.items.push(...res.result.subTypes[index].goodsItems.items)
}
onLoad(() => {
  getHotList()
})
</script>
<!-- scoped -->
<style lang="scss" >
page {
  background-color: #f4f4f4;
  height: 100%; // 加上scoped，page的样式h，就被覆盖了。。。

  .viewport {
    // background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .cover {
    width: 750rpx;
    height: 225rpx;
    border-radius: 0 0 40rpx 40rpx;
    overflow: hidden;
    .image {
      width: 750rpx;
    }
  }

  .tabs {
    color: #333;
    background-color: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin: 0 20rpx;
    height: 100rpx;
    line-height: 90rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top:-20rpx;
    z-index:11;
    position: relative;

    box-shadow: 0 4rpx 5rpx
      rgba(200, 200, 200, 0.3);

    .active {
      position: relative;
      &::after {
        content: '';
        width: 40rpx;
        height: 4rpx;
        background-color: #27ba9b;
        position: absolute;
        left: 50%;
        bottom: 24rpx;
        transform: translate(-50%);
      }
    }
  }

  .scroll-view{
    flex:1;
    overflow: hidden;

    .goods {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  
      padding: 0 20rpx 20rpx;
      .navigator {
        width: 342rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
  
        margin-top: 20rpx;
        .thumb {
          width: 305rpx;
          height: 305rpx;
        }
      }
      .name {
        // height: 88rpx;
        font-size: 26rpx;
      }
      .price {
        // line-height: 1;
        color: #cf4444;
        font-size: 30rpx;
      }
      .symbol {
        font-size: 70%;
      }
    }
  
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    //  padding: 20rpx 0 50rpx;
  }
}
</style>
